<template>
  <div class="timeContainer">
    <Navigation></Navigation>
    <div class="timecontent">
      <div class="newest">
        <img
          src="https://img1.doubanio.com/dae/niffler/niffler/images/3a23891e-d638-11ea-8c9a-1256adf40319.jpg"
          alt=""
        />
      </div>
      <div class="navItem">
        <ul>
          <li>
            <a href="javascript:;">
              <img src="./images/time1.jpg" alt="" />
              <p>青椒学院</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/time2.jpg" alt="" />
              <p>时间发现</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/time3.jpg" alt="" />
              <p>全部专栏</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/time4.jpg" alt="" />
              <p>签到</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="./images/time5.jpg" alt="" />
              <p>我的</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="recommend">
        <div class="recommendIntroduce">
          <h2>新品尝鲜：从《教父》看美国黑帮史</h2>
          <div class="recommendContent">
            <img
              src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/1f63a874-f7ef-11ea-a542-9adc3f52cc59.jpg?imageView2/2/q/80/w/240/h/240/format/jpg"
              alt=""
            />
            <div class="contentIntroduce">
              <h2>美国故事的背后——黑帮电影中的社会、文化与历史</h2>
              <span class="newPrice">99.00元</span>
              <sapn class="price">129.00元</sapn>
              <i>主讲人 李洋</i>
              <p>
                透过39部黑帮题材影视剧，带你了解一个亚文化符号背后的社会、历史与文化
              </p>
            </div>
            <div class="audition">
              <div class="box">
                <a href="javascript:;">
                  <img
                    src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3685162830,1870445540&fm=26&gp=0.jpg"
                    alt=""
                  />
                  <span class="shiting">试听</span>
                  <span class="jieshao"
                    >发刊词 如何看懂黑帮片——黑帮、流行文化与二十世纪的历史</span
                  >
                </a>
              </div>
              <div class="box">
                <a href="javascript:;">
                  <img
                    src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3685162830,1870445540&fm=26&gp=0.jpg"
                    alt=""
                  />
                  <span class="shiting">试听</span>
                  <span class="jieshao"
                    >《教父》的诞生：两个穷途之人的爆发</span
                  >
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="audio">
        <h2 class="listName">秋日特惠</h2>
        <div class="list">
          <div class="inactive">
            <a href="javascript:;">
              <img
                src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg"
                alt=""
              />
              <h2 class="name">童话交响梦——古典音乐这样听</h2>
              <span class="newPrice">79.00元</span>
              <p class="price">129.00元</p>
            </a>
          </div>
          <div class="inactive">
            <a href="javascript:;">
              <img
                src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg"
                alt=""
              />
              <h2 class="name">童话交响梦——古典音乐这样听</h2>
              <span class="newPrice">79.00元</span>
              <p class="price">129.00元</p>
            </a>
          </div>
          <div class="inactive">
            <a href="javascript:;">
              <img
                src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg"
                alt=""
              />
              <h2 class="name">童话交响梦——古典音乐这样听</h2>
              <span class="newPrice">79.00元</span>
              <p class="price">129.00元</p>
            </a>
          </div>
          <div class="inactive">
            <a href="javascript:;">
              <img
                src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg"
                alt=""
              />
              <h2 class="name">童话交响梦——古典音乐这样听</h2>
              <span class="newPrice">79.00元</span>
              <p class="price">129.00元</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState ,mapActions} from 'vuex'
export default {
  name: "Time",
  data() {
      return {
        //   timeInfo:{}
      }
  },
//   computed: {
//       ...mapState({
//           timeInfo: (state) => state.time.timeInfo
//       })
//   },

  mounted() {
     this.$store.dispatch('getTimeInfoList')
    console.log(this.$store.state.timeInfo)
  },
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.timeContainer {
  .timecontent {
    width: 640px;
    height: 4000px;
    margin: 0 auto;
    overflow: hidden;
    .newest {
      height: 296px;
      position: relative;
      img {
        position: absolute;
        top: 18px;
        left: 28px;
        width: 585px;
        height: 258px;
        border-radius: 10px;
      }
    }
    .navItem {
      height: 109px;
      background: #ffffff;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          list-style: none;
          a {
            text-decoration: none;
            img {
              width: 44px;
              height: 44px;
              border-radius: 50%;
              margin: 0 10px;
            }
            p {
              color: rgba(0, 0, 0, 0.5);
              text-align: center;
            }
          }
        }
      }
    }
    .recommend {
      height: 252px;
      .recommendIntroduce {
        width: 620px;
        margin: 0 10px;
        h2 {
          padding: 20px 0 0;
          font-size: 19px;
        }
        .recommendContent {
          width: 100%;
          padding: 15px 0;
          img {
            width: 100px;
            height: 100px;
            margin-right: 15px;
            float: left;
          }
          .contentIntroduce {
            position: relative;
            h2 {
              font-size: 15px;
              padding: 0 0 15px;
              color: rgba(0, 0, 0, 0.9);
            }
            i {
              font-size: 13px;
              color: rgba(0, 0, 0, 0.5);
            }
            .newPrice {
              font-size: 13px;
              position: absolute;
              top: 0;
              right: 0;
              color: #f97927;
            }
            .price {
              font-size: 13px;
              position: absolute;
              top: 17px;
              right: 0;
              color: rgba(0, 0, 0, 0.25);
              text-decoration: line-through;
            }
            p {
              font-size: 11px;
              height: 36px;
              line-height: 36px;
              color: rgba(0, 0, 0, 0.5);
            }
          }
        }
        .audition {
          width: 100%;
          height: 83px;
          margin-top: 20px;
          .box {
            width: 244px;
            height: 60px;
            padding: 10px;
            box-sizing: border-box;
            position: relative;
            float: left;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            margin-right: 10px;
            a {
              text-decoration: none;
              img {
                width: 24px;
                height: 24px;
                border-radius: 50%;
              }
              .shiting {
                font-size: 12px;
                position: absolute;
                bottom: 7px;
                left: 11px;
                color: #42bd56;
              }
              .jieshao {
                font-size: 13px;
                color: rgba(0, 0, 0, 0.9);
              }
            }
          }
        }
      }
    }
    .audio {
      width: 630px;
      height: 400px;
      padding: 0 10px;
      overflow: auto;
      box-sizing: border-box;
      .listName {
        font-size: 19px;
        padding-top: 20px;
      }
      .list {
        width: 1000px;
        height: 310px;
        padding-top: 20px;
        .inactive {
          width: 208px;
          height: 287px;
          float: left;
          a {
            text-decoration: none;
            img {
              width: 198px;
              height: 198px;
              border-radius: 5px;
            }
            .name {
              font-size: 15px;
              color: rgba(0, 0, 0, 0.9);
              padding: 10px 0;
            }
            .newPrice {
              padding-bottom: 5px;
              font-size: 14px;
              color: #f97927;
            }
            .price {
              font-size: 12px;
              color: rgba(0, 0, 0, 0.25);
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
}
</style>